<template>
  <el-popover placement="bottom" trigger="hover" content="导航" effect="dark">
    <template #reference>
      <i @click="NavigationActive = true" class="iconfont icon-luxian"></i>
    </template>
  </el-popover>
  <!-- 点击事件后 生成的弹出框 -->
  <div class="navigations-container" :class="{ active: NavigationActive }">
    <div class="traffic-change">
      <i
        v-for="(item, index) in TransportationChoice"
        :key="index"
        :class="item.icon"
      ></i>
    </div>
    <div class="traffic-lineRoad">
      <i class="iconfont icon-luxian_0"></i>
      <div class="start-end">
        <div>
          <span>起</span>
          <input
            type="text"
            placeholder="请输入起点"
            v-model="startInput"
            @change="startInputchange"
          />
        </div>
        <div>
          <span>终</span>
          <input
            type="text"
            placeholder="请输入终点"
            v-model="endInput"
            @change="endInputchange"
          />
        </div>
      </div>
      <div class="add-Stops">+</div>
    </div>
    <button class="traffic-go" @click="trafficGoWay">开车去</button>
    <i class="iconfont icon-shanchu" @click="NavigationActive = false"></i>
  </div>
  <div id="my-panel"></div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  receiveMapinstance: {
    type: Object,
    required: true,
  },
  receivecityName: {
    type: String,
  },
})
const map = ref(null)
const AMap = ref(null)
const cityName = ref('')

const NavigationActive = ref(false)

const startInput = ref('')
const endInput = ref('')

const drivingLayer = ref(null)
const busLayer = ref(null)
const walkLayer = ref(null)

const TransportationChoice = ref([
  { icon: 'iconfont icon-xiaoqiche' },
  { icon: 'iconfont icon-gongjiaoche' },
  { icon: 'iconfont icon-buxing' },
])

const lineRoad = ref([])

//输入起点
const startInputchange = () => {
  lineRoad.value.push({
    keyword: startInput.value,
    city: cityName.value,
  })
  console.log(lineRoad.value)
}
//输入终点
const endInputchange = () => {
  lineRoad.value.push({
    keyword: endInput.value,
    city: cityName.value,
  })
  console.log(lineRoad.value)
}

//出发
const trafficGoWay = () => {
  if (lineRoad.value.length < 2) {
    alert('请输入起点和终点')
    return
  }
  console.log(lineRoad.value)

  //搜索完成后，将自动绘制路线到地图上
  drivingLayer.value.search(lineRoad.value)
}

watch(
  () => props.receiveMapinstance,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      map.value = newVal.map
      AMap.value = newVal.AMap
      //  console.log('map', map.value)
      // console.log('AMap', AMap.value)

      drivingLayer.value = new AMap.value.Driving({
        //驾车路线规划策略，0是速度优先的策略
        policy: 0,
        //map 指定将路线规划方案绘制到对应的 AMap.Map 对象上
        map: map.value,
        //panel 指定将结构化的路线详情数据显示的对应的 DOM 上，传入值需是 DOM 的 ID
        panel: 'my-panel',
      })
    }
  }
)
watch(
  () => props.receivecityName,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      cityName.value = newVal
      //  console.log(cityName.value)
    }
  }
)
</script>

<style lang="scss" scoped>
@import 'https://at.alicdn.com/t/c/font_4946857_jx8vh2h7rko.css?spm=a313x.manage_type_myprojects.i1.9.41ec3a81WdKUGA&file=font_4946857_jx8vh2h7rko.css';

// :deep(.el-popover) {
//   min-width: 50px ;
//   width: 50px ;
//   background-color: transparent;
//   text-align: center;
// }
.icon-luxian {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background-color: rgb(249, 249, 249);
  color: rgb(38, 163, 253);
  font-size: 20px;
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
  &:hover {
    color: rgb(74, 177, 255);
    cursor: pointer;
  }
}

.navigations-container {
  box-sizing: border-box;
  position: fixed;
  top: 17px;
  left: 10px;
  width: 350px;
  height: 215px;
  background-color: #3998fb;
  font-size: 12px;
  line-height: 1.5;
  color: #565656;
  padding: 20px 10px;
  border-radius: 2px 3px 3px 2px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  transform: translateY(-150%);
  transition: transform 0.5s ease-in-out;
  z-index: 100;
  .traffic-change {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    .iconfont {
      margin: 0px 20px;
      font-size: 20px;
      cursor: pointer;
    }
  }
  .traffic-lineRoad {
    display: flex;
    align-items: center;
    margin: 0 10px;
    .icon-luxian_0 {
      color: white;
      font-size: 16px;
    }
    .start-end {
      width: 270px;
      margin: 0px 10px;

      div {
        flex: 1;
        height: 34px;
        background-color: #318ce9;
        line-height: 34px;
        font-size: 14px;
        margin: 10px 0;
        color: #acd7ff;
        span {
          padding: 0px 10px;
          color: #acd7ff;
        }
        input {
          border: none;
          outline: none;
          color: #acd7ff;
          background-color: transparent;
        }
      }
    }
    .add-Stops {
      width: 20px;
      height: 20px;
      background-color: #52a5f9;
      line-height: 20px;
      text-align: center;
      border-radius: 50%;
      color: white;
      cursor: pointer;
    }
  }
  .traffic-go {
    display: inline-block;
    padding: 0 25px;
    height: 32px;
    margin-top: 10px;
    line-height: 32px;
    background-color: #559ffb;
    border: none;
    border-radius: 2px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.21);
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.21);
    cursor: pointer;
    transform: translateX(208px);
  }
  .icon-shanchu {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 16px;
    color: white;
    cursor: pointer;
  }
}
.navigations-container.active {
  transform: translateY(0);
}

input::placeholder {
  color: #acd7ff;
}
</style>
